<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div v-show="showSearch">
				<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList" class="search-form-row">
					<el-row :gutter="10">
						<el-col :span="6">
							<el-form-item label="品类名称" prop="name">
								<el-input v-model="state.queryForm.name" placeholder="请输入品类名称" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
						<el-form-item>
							<el-button formDialogRef icon="search" type="primary" @click="getDataList">查询</el-button>
							<el-button formDialogRef icon="Refresh" @click="resetQuery">重置</el-button>
						</el-form-item>
					</el-col>
					</el-row>
				</el-form>
			</div>
			<el-row>
				<div class="mb8" style="width: 100%">
					<el-button class="ml10" icon="folder-add" v-auth="'access_accessCategory_add'"  type="primary" @click="formDialogRef.openDialog(null, 'add')"> 新增 </el-button>
					<right-toolbar
						v-model:showSearch="showSearch"
						:export="'access_accessCategory_export'"
						v-auth="'access_accessCategory_view'" 
						class="ml10"
						style="float: right; margin-right: 20px"
						@exportExcel="exportExcel"
						@queryTable="getDataList"
					></right-toolbar>
				</div>
			</el-row>
			<el-table v-loading="state.loading" border :data="state.dataList" :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle" class="tableClass">
				<el-table-column type="index" label="序号" width="100" />
				<el-table-column prop="identify" label="id" width="300" />
				<el-table-column prop="name" label="品类名称" />
				<el-table-column prop="createTime" label="创建时间" />
				<el-table-column fixed="right" label="操作" width="500" align="center">
					<template #default="scope">
						<el-button  icon="edit-pen"  text type="primary" @click="formDialogRef.openDialog(scope.row, 'edit')">修改 </el-button>
						<el-button  icon="delete" text  type="primary" @click="handleDelete(scope.row.id)">删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-bind="state.pagination" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" />
		</div>
		<!-- 编辑、新增  -->
		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
		<!-- <demo-chart/> -->
	</div>
</template>

<script lang="ts" name="category" setup>
import { fetchList, delObjs } from '/@/api/basiciot/device/category';
import { onMounted, reactive, ref } from 'vue';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import { BasicTableProps, useTable } from '/@/hooks/table';
// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const { t } = useI18n();
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
	createdIsNeed: false,
	pagination: {
		current: 1,
		size: 10,
		total: 0,
	},
});
// 定义变量内容
const formDialogRef = ref();
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);
// 清空搜索条件
const resetQuery = () => {
	queryRef.value.resetFields();
	getDataList();
};
// 删除操作
const handleDelete = (id: string) => {
	useMessageBox()
		.confirm(t('common.delConfirmText'))
		.then(() => {
			delObjs([id])
				.then(() => {
					getDataList();
					useMessage().success(t('common.delSuccessText'));
				})
				.catch((err: any) => {
					useMessage().error(err.msg);
				});
		});
};
// 导出excel
const exportExcel = () => {
	// downBlobFile('/admin/user/export', Object.assign(state.queryForm, { ids: selectObjs }), 'users.xlsx');
};
onMounted(() => {
	getDataList();
});
</script>
<style scoped lang="scss">
.tableClass {
	min-height: vh(580);
}
</style>
